{% extends 'src/index.html' %}
{% block body %}
     <main class = 'container bg-white p-3 rounded'>
      <style>  
        body {  
            font-family: Arial, sans-serif;  
            margin: 0;  
            padding: 0;  
        }  

        /* 侧边栏样式 */  
        .sidebar {  
            height: 100%;  
            width: 80px;  
            position: fixed; /* 固定定位 */  
            top:10;  
            left: 0;  
            background-color: #333; /* 背景颜色 */  
            padding-top: 20px;  
        }  

        /* 侧边栏中的链接样式 */  
        .sidebar a {  
            padding: 10px 15px;  
            text-decoration: none;  
            font-size: 18px;  
            color: white; /* 字体颜色 */  
            display: block;  
        }  

        /* 悬停效果 */  
        .sidebar a:hover {  
            background-color: #575757; /* 悬停时改变背景颜色 */  
        }  

        /* 主内容样式 */  
        .main {  
            margin-left: 260px; /* 主内容区留出侧边栏空间 */  
            padding: 20px;  
        }  
    </style>  
   
   <div class = 'row'>  <div class="card text-center">
       <style>button{margin-outside:"10"}</style>
       
  <div class="card-header">结构检测情况
  </div>
  <div class="card-body">
    <h5 class="card-title"></h5>
    <p class="card-text"></p>
     
     <a href="lige1" class="btn btn-primary">查看1应力</a> <br>
      <a href="lige2" class="btn btn-primary">查看2应力</a> <br>
      <a href="lige3" class="btn btn-primary">查看3应力</a>
  </div>
  <div class="card-footer text-body-secondary">
  </div>
    <div class="sidebar">  
        <h2></h2>  
        <a href="#home">细节结构</a>  
        <a href="#about">具体应力</a>  
        <a href="#services">服务</a>  
        <a href="#contact">联系方式</a>  
    </div>  
    
</div></div>
    
    
    
{% endblock %}